<template>
  <div class="app-container">
    <div class="container">
      <!--      标题-->
      <el-row>
        <el-col :span="24" :xs="24">
          <div class="title">传输设备<i class="el-icon-caret-right"></i>通道列表</div>
        </el-col>
      </el-row>
      <!-- 搜索 -->
      <el-row :gutter="10" style="margin-left: 20px;">
        <el-col :span="21" :xs="24">
          <Search
              :search-data="searchData"
              :search-params="queryParams"
              @change="searchParamsUpdate"
          >
          </Search>
        </el-col>
        <el-col :span="2">
          <el-button
              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
              size="mini"
              @click="dialogFormVisible = true"
          >参数与说明</el-button>
        </el-col>
        <el-col :span="1">
          <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
        </el-col>
      </el-row>
      <!--    增加-->
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="1.5">-->
<!--          <el-button-->
<!--              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"-->
<!--              icon="el-icon-plus"-->
<!--              size="mini"-->
<!--              @click="handleAdd"-->
<!--          >参数与说明</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="1">-->
<!--          <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <!--      表格-->
      <el-table
          :data="tableData"
          height="66vh"
          style="width: 100%;background: #002127;"
          :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
          :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
        <el-table-column prop="deviceId" label="传输设备ID" align="center" v-if="columns[0].visible"></el-table-column>
        <el-table-column prop="deviceName" label="传输设备" align="center" v-if="columns[1].visible"></el-table-column>
        <el-table-column prop="industryDeviceName" label="现场设备" align="center" v-if="columns[2].visible"></el-table-column>
        <el-table-column prop="channel" label="通道" align="center" v-if="columns[3].visible"></el-table-column>
        <el-table-column prop="channelAlias" label="通道别名" align="center" v-if="columns[4].visible"></el-table-column>
        <el-table-column prop="unit" label="通道单位" align="center" v-if="columns[5].visible"></el-table-column>
        <el-table-column prop="upAlarm" label="上限告警" align="center" v-if="columns[6].visible"></el-table-column>
        <el-table-column prop="downAlarm" label="下限告警" align="center" v-if="columns[7].visible"></el-table-column>
        <el-table-column prop="switchAlarm" label="设置" align="center" v-if="columns[8].visible">
          <template slot-scope="scope">
            <span v-if="scope.row.switchAlarm == '信息接收'" style="color: #FFFFFF">{{ scope.row.switchAlarm }}</span>
            <span v-else-if="scope.row.switchAlarm == '信息忽略'" style="color: #F2FF00">{{ scope.row.switchAlarm }}</span>
            <span v-else style="color: #FF1818">{{ scope.row.switchAlarm }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dataType" label="数据类型" align="center" v-if="columns[9].visible"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" width="200" v-if="columns[10].visible" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
                style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--            <el-button-->
<!--                style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"-->
<!--                size="mini"-->
<!--                icon="el-icon-delete"-->
 <!--                @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            <el-button
                style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                size="mini"
                @click="handleChannel(scope.$index, scope.row)">配置现场设备</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-row>
        <el-col :span="24" :xs="24">
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.limit"
          />
        </el-col>
      </el-row>
      <!--      新增-->
      <div class="add">
        <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="现场设备" prop="deviceIndustryId">
                  <el-select
                      v-model="form.deviceIndustryId"
                      placeholder="请选择"
                      filterable
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in industryOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="通道名称" prop="channel">-->
<!--                  <el-input v-model="form.channel" placeholder="请输入" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="通道别名" prop="channelAlias">-->
<!--                  <el-input v-model="form.channelAlias" placeholder="请输入" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="通道单位" prop="unit">-->
<!--                  <el-input v-model="form.unit" placeholder="请输入" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="告警上限" prop="upAlarm">-->
<!--                  <el-input v-model="form.upAlarm" placeholder="请输入" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="告警下限" prop="downAlarm">-->
<!--                  <el-input v-model="form.downAlarm" placeholder="请输入" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="告警开关" prop="switchAlarm">-->
<!--                  <el-select-->
<!--                      v-model="form.switchAlarm"-->
<!--                      placeholder="请选择"-->
<!--                      filterable-->
<!--                      style="width: 100%"-->
<!--                  >-->
<!--                    <el-option-->
<!--                        v-for="item in switchOption"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
      <!--      编辑-->
      <div class="add">
        <el-dialog :title="title1" :visible.sync="open1" width="600px" :show-close="false">
          <el-form ref="form" :model="form1" :rules="rules1" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备ID" prop="deviceId">
                  <el-input v-model="form1.deviceId" placeholder="请输入" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备名称" prop="deviceName">
                  <el-input v-model="form1.deviceName" placeholder="请输入" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="通道名称" prop="channel">
                  <el-input v-model="form1.channel" placeholder="请输入"  :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="通道别名" prop="channelAlias">
                  <el-input v-model="form1.channelAlias" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="通道单位" prop="unit">
                  <el-input v-model="form1.unit" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="告警上限" prop="upAlarm">
                  <el-input v-model="form1.upAlarm" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="告警下限" prop="downAlarm">
                  <el-input v-model="form1.downAlarm" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="设置" prop="switchAlarm">
                  <el-select
                      v-model="form1.switchAlarm"
                      placeholder="请选择"
                      filterable
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in switchOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="数据类型" prop="dataType">
                  <el-select
                      v-model="form1.dataType"
                      placeholder="请选择"
                      filterable
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in dataTypeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm1" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel1" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
<!--      参数与说明-->
      <div class="add">
        <el-dialog title="数据类型说明" :visible.sync="dialogFormVisible" width="600px">
          <div class="icon">
            <div class="icons" v-for="(item,index) in proveTypeOption" :key="index">
              <div class="icons_name">{{item.name}}</div>
              <div class="icons_text">{{item.type}}</div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {getRuleByPage, saveRuleId, getRuleInfo, deleteRuleById, getDtuAllList, bindRuleId, getIndustryAllList, dataTypeRuleId} from '@/api/automation'
import Search from '@/components/PageSearch'
import Pagination from "@/components/Pagination";
import RightToolbar from '@/components/RightToolbar'
const defaultForm = {
  deviceIndustryId: ''
//   channel: '',
//   channelAlias: '',
//   deviceId: '',
//   unit: '',
//   downAlarm: '',
//   switchAlarm: '',
//   upAlarm: ''
}
export default {
  name: "channel",
  components: { Search, Pagination, RightToolbar },
  data() {
    return {
      // 搜索
      searchData: [
        {
          type: 'select',
          label: '设备',
          prop: 'deviceId',
          options: [],
          placeholder: '请选择设备筛选'
        },
        {
          type: 'input',
          label: '通道',
          prop: 'channel',
          placeholder: '请输入通道筛选'
        },
        {
          type: 'input',
          label: '通道别名',
          prop: 'channelAlias',
          placeholder: '请输入通道别名筛选'
        }
      ],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        deviceId: '',
        channel: '',
        channelAlias: ''
      },
      // 表格
      tableData: [],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `传输设备ID`, visible: true },
        { key: 1, label: `传输设备`, visible: true },
        { key: 2, label: `现场设备`, visible: true },
        { key: 3, label: `通道`, visible: true },
        { key: 4, label: `通道别名`, visible: false },
        { key: 5, label: `通道单位`, visible: true },
        { key: 6, label: `上限告警`, visible: true },
        { key: 7, label: `下限告警`, visible: true },
        { key: 8, label: `设置`, visible: true },
        { key: 9, label: `数据类型`, visible: true },
        { key: 10, label: `更新时间`, visible: true },
      ],
      // 弹出层标题
      title: "配置现场设备",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: Object.assign({}, defaultForm),
      ids: '',
      deviceIds: '',
      siteIds: '',
      deviceIndustryDataRuleIds: '',
      // 表单校验
      rules: {
        deviceIndustryId: [
          { required: true, message: '请选择绑定的现场设备', trigger: 'change' }
        ]
      },
      id: '',
      title1: "编辑设备通道",
      open1: false,
      form1: {
        id: '',
        channel: '',
        channelAlias: '',
        deviceId: '',
        unit: '',
        deviceName: '',
        downAlarm: '',
        switchAlarm: '',
        upAlarm: '',
        dataType: ''
      },
      rules1: {
        deviceId: [
          { required: true, message: '请输入设备ID', trigger: 'blur' }
        ]
      },
      dtuOption: [],
      industryOption: [],
      switchOption: [{value:0, label:"信息接收"},{value:1, label:"告警检测"},{value:-1, label:"信息忽略"}],
      dataTypeOption: [],
      proveTypeOption: [],
      // 图标说明弹框
      dialogFormVisible: false,
      // 路由跳转传递的参数
      deviceId: '',
      deviceName: ''
    }
  },
  props: {},
  watch: {
    dtuOption: {
      handler(val) {
        this.searchData[0].options = this.dtuOption
      },
      immediate: true
    },
  },
  created() {
    this.deviceId = this.$route.query.deviceId
    this.deviceName = this.$route.query.deviceName
    if(this.deviceId) {
      this.queryParams.deviceId = this.deviceId
    }
    this.getTypeOption()
    this.getDtuOption()
    this.getList()
  },
  mounted() {
  },
  methods: {
    //设备下拉
    getDtuOption() {
      getDtuAllList().then(res => {
        const data = res.data
        this.dtuOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    //现场设备下拉
    getIndustryOption() {
      getIndustryAllList(this.siteIds).then(res => {
        const data = res.data
        this.industryOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    //数据类型下拉
    getTypeOption() {
      dataTypeRuleId().then(res => {
        const data = res.data
        this.dataTypeOption = data.map(item => {
          return {
            value: item.id,
            label: item.name.split('#')[0]
          }
        })
        console.log(this.dataTypeOption,'sddddddd')
        this.proveTypeOption = data.map(item => {
          return {
            name: item.name.split('#')[0],
            type: item.name.split('#')[1],
          }
        })
        console.log(this.proveTypeOption,'proveTypeOption')
      }).catch(err => {
        console.log(err)
      })
    },
    getList() {
      getRuleByPage(this.queryParams).then((res) => {
        console.log(res)
        this.total = res.dataCounts
        this.tableData = res.data || []
        res.data.map(item => {
          this.dataTypeOption.map(items => {
            if(item.dataType == items.value){
              item.dataType = items.label
            }
          })
          if (item.switchAlarm === 0) {
            item.switchAlarm = '信息接收'
          } else if (item.switchAlarm === 1) {
            item.switchAlarm = '告警检测'
          }  else if (item.switchAlarm === -1) {
            item.switchAlarm = '信息忽略'
          }
        })
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 通道配置
    handleChannel(index,row) {
      console.log(index,row)
      this.ids = row.id
      this.deviceIds = row.deviceId
      this.siteIds = row.siteId
      this.deviceIndustryDataRuleIds = row.deviceIndustryDataRuleId
      this.open = true
      this.getIndustryOption()
    },
    // 新增
    // handleAdd() {
    //   this.open = true
    // },
    dialogCancel() {
      this.open = false
      this.form = Object.assign({}, defaultForm)
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = [{
            dataRuleId: this.ids,
            deviceId: this.deviceIds,
            siteId: this.siteIds,
            deviceIndustryId: this.form.deviceIndustryId,
            deviceIndustryDataRuleId: this.deviceIndustryDataRuleIds
          }]
          bindRuleId(data).then((res) => {
            this.$message.success('配置成功！')
            this.dialogCancel()
            this.getList()
          }).catch((err) => {
            this.$message.error(err.errorMsg)
          })
        } else {
          this.$message.warning('请填写相关字段内容')
          return false
        }
      })
    },
    // submitForm() {
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       const data= {
    //         deviceId: this.deviceId,
    //         channel: this.form.channel,
    //         channelAlias: this.form.channelAlias,
    //         unit: this.form.unit,
    //         downAlarm: this.form.downAlarm,
    //         switchAlarm: this.form.switchAlarm,
    //         upAlarm: this.form.upAlarm
    //       }
    //       saveRuleId(data).then((res) => {
    //         this.$message.success('添加成功！')
    //         this.dialogCancel()
    //         this.getList()
    //       }).catch((err) => {
    //         this.$message.error(err.errorMsg)
    //       })
    //     } else {
    //       this.$message.warning('请填写相关字段内容')
    //       return false
    //     }
    //   })
    // },
    // 编辑
    handleEdit(index, row) {
      console.log(index,row)
      this.id = row.id
      // this.form1.deviceId = row.deviceId
      // this.form1.deviceName = row.deviceName
      // this.form1.channel = row.channel
      // this.form1.channelAlias = row.channelAlias
      // this.form1.unit = row.unit
      // this.form1.downAlarm = row.downAlarm
      // this.form1.switchAlarm = row.switchAlarm
      // this.form1.upAlarm = row.upAlarm
      // this.form1.dataType = row.dataType
      getRuleInfo(row.id).then(res => {
        this.form1 = Object.assign({}, res.data)
        console.log(this.dataTypeOption,'23334')
        this.dataTypeOption.map(item => {
          if( item.value == res.data.dataType) {
            item.value = this.form1.dataType
          }
        })
      }).catch(err => {
        console.log(err.errorMsg)
        // this.$message.error(err.errorMsg)
      })
      this.open1 = true
    },
    dialogCancel1() {
      this.open1 = false
    },
    submitForm1() {
      const data = {
        id: this.id,
        channelAlias: this.form1.channelAlias,
        unit: this.form1.unit,
        downAlarm: this.form1.downAlarm,
        switchAlarm: this.form1.switchAlarm,
        upAlarm: this.form1.upAlarm,
        dataType: this.form1.dataType
      }
      saveRuleId(data).then((res) => {
        this.$message.success('编辑成功！')
        this.open1 = false
        this.getList()
      }).catch((err) => {
        this.$message.error(err.errorMsg)
      })
    },
    // 删除
    // handleDelete(index,row) {
    //   console.log(index,row)
    //   this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //     beforeClose: (action, instance, done) => {
    //       console.log(action)
    //       if (action === 'confirm') {
    //         instance.confirmButtonLoading = true
    //         instance.confirmButtonText = '执行中...'
    //         deleteRuleById(row.id).then(res => {
    //           done()
    //           instance.confirmButtonLoading = false
    //         }).catch(err => {
    //           this.$message.error(err.errorMsg)
    //         })
    //       } else {
    //         done()
    //         instance.confirmButtonLoading = false
    //       }
    //     }
    //   }).then(() => {
    //     this.$message.success('删除成功!')
    //     this.getList()
    //   }).catch(() => {
    //     this.$message.info('已取消删除')
    //   })
    // },
    // 新的搜索内容
    searchParamsUpdate() {
      this.getList()
    }
  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #002127;
    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 15px;
      padding-left: 20px;
      margin-top: 10px;
    }
    // 显隐列
    //.el-col-1 {
    //  float: right;
    //}
  }
}
.add {
  ::v-deep(.el-dialog){
    background: rgba(4,28,33,0.8);
    box-shadow: 0px 0px 20px 0px rgba(0,231,231,0.5);
    border-radius: 20px;
    border: 1px solid rgba(0,231,231,0.698);
    //标题颜色
    .el-dialog__title {
      color: white;
    }
    // 输入框label字体颜色
    .el-form-item__label {
      color: white;
    }
    // 输入框
    .el-input__inner {
      background: #041C21;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(0,231,231,0.502);
      color: white;
    }
    // 错误规则提示
    .el-form-item__label:before {
      color: #00E7E7;
    }
    // 必填星号
    .el-form-item__error {
      color: #00E7E7;
    }
  }
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover>td{
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table  td, .el-table th.is-leaf  {
  border-bottom:  1px solid rgba(0,231,231,0.302)!important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
// 参数说明
.icon{
  width: 100%;
  height: 100%;
  .icons{
    width: 100%;
    display: flex;
    //align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    .icons_name{
      width: 25%;
    }
    .icons_text{
      width: 75%;
      //white-space:normal;
      //word-break:break-all;
    }
  }
}
</style>
